<template>
  <div class="dynamic-view" ref="dynamic" @scroll="dynamicScroll">
    <div class="top-search-box">
      <div class="left-box">
        <div class="text-sign">签到</div>
      </div>
      <div class="center-box">
        <van-tabs
          v-model="active"
          color="rgb(249, 217, 50)"
          line-width="32px"
          title-active-color="#000"
          @click="changeRouter"
        >
          <van-tab
            :title="item.title"
            v-for="(item, index) in tabbarData"
            :key="index"
          >
          </van-tab>
        </van-tabs>
      </div>
      <div class="right-box"></div>
    </div>
    <div class="go-back-to-top" @click="goToTop" v-if="goToTopIconState">
      <van-icon name="arrow-up" /><br />返回<br />顶部
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <keep-alive>
      <router-view :scrollTop="scrollTop"></router-view>
    </keep-alive>
    </van-pull-refresh>
  </div>
</template>

<script>
import { throttle } from "@/utils/throttle";

export default {
  name: "DynamicView",
  data() {
    return {
      //顶部导航栏激活下标
      active: 0,
      //顶部导航栏数据
      tabbarData: [
        {
          title: "隔壁",
          name: "NearbyContentView",
        },
        {
          title: "关注",
          name: "DynamicFollowContentView",
        },
      ],
      //返回顶部的按钮显示状态
      goToTopIconState: false,
      //dynamic的滚动距离
      scrollTop: 0,
      isLoading: false,
    };
  },
  created() {
    //刷新时根据路由激活下标
    this.active = Number(window.localStorage.getItem("dynamicActiveIndex"));
  },
  activated() {
    this.tabbarData.forEach((item, index) => {
      if (index == this.active) {
        this.$router.push({ name: item.name });
      }
    });
  },
  methods: {
    //返回顶部方法
    goToTop() {
      this.$refs.dynamic.scrollTo(0, 0);
    },
    //dynamic的滚动方法
    dynamicScroll: throttle(function () {
      this.scrollTop = this.$refs.dynamic.scrollTop;
      if (this.scrollTop >= 150) {
        this.goToTopIconState = true;
      } else {
        this.goToTopIconState = false;
      }
    }, 500),
    //二级路由切换
    changeRouter() {
      window.localStorage.setItem("dynamicActiveIndex", this.active);
      this.tabbarData.forEach((item, index) => {
        if (index == this.active) {
          this.$router.push({ name: item.name });
        }
      });
    },
    //上拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.van-tabs {
  margin: -3px 0 0 25px !important;
}
.dynamic-view {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  .top-search-box {
    width: 100vw;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 50;
    padding-left: 10px;
    padding-top: 10px;
    background-color: #fff;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    .left-box {
      width: 60px;
      height: 30px;
      border-radius: 999px;
      background-image: url(../../assets/images/home/mfz.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      position: relative;
      .text-sign {
        position: absolute;
        right: 7px;
        font-weight: 600;
        top: 10px;
        font-size: 14px;
      }
    }
    .center-box {
      width: 160px;
      height: 35px;
      border-radius: 5px;
      display: flex;
      position: relative;
      font-size: 14px;
    }
    .right-box {
      width: 65px;
      height: 30px;
      background-color: red;
      border-radius: 999px;
      overflow: hidden;
      background-image: url(../../assets/images/home/3y6.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      position: relative;
      left: -20px;
    }
  }
  .go-back-to-top {
    width: 70px;
    height: 70px;
    font-size: 20px;
    background-color: rgb(255, 223, 51);
    text-align: center;
    line-height: 20px;
    border-radius: 999px;
    position: fixed;
    right: -7px;
    bottom: 90px;
    transform: scale(0.5);
    z-index: 99;
  }
}
</style>